import React from 'react'
import { CheckCircle, XCircle, AlertCircle, Wifi, WifiOff, Database } from 'lucide-react'
import { ProducerResult } from '../../pages/MessageProducer'

interface ProducerSidebarProps {
  lastResult: ProducerResult | null
  connected: boolean
  selectedTopic: string
  isProducing: boolean
}

export function ProducerSidebar({ 
  lastResult, 
  connected, 
  selectedTopic, 
  isProducing 
}: ProducerSidebarProps) {
  return (
    <>
      {/* 连接状态 */}
      <div className="card">
        <div className="card-header">
          <h3 className="card-title">连接状态</h3>
        </div>
        <div className="card-content">
          <div className="flex items-center space-x-3">
            {connected ? (
              <>
                <Wifi className="w-5 h-5 text-green-500" />
                <div>
                  <p className="text-sm font-medium text-green-700">已连接</p>
                  <p className="text-xs text-green-600">WebSocket连接正常</p>
                </div>
              </>
            ) : (
              <>
                <WifiOff className="w-5 h-5 text-red-500" />
                <div>
                  <p className="text-sm font-medium text-red-700">未连接</p>
                  <p className="text-xs text-red-600">WebSocket连接断开</p>
                </div>
              </>
            )}
          </div>
        </div>
      </div>

      {/* 当前Topic */}
      <div className="card">
        <div className="card-header">
          <h3 className="card-title">当前Topic</h3>
        </div>
        <div className="card-content">
          <div className="flex items-center space-x-3">
            <Database className="w-5 h-5 text-primary-500" />
            <div className="flex-1 min-w-0">
              {selectedTopic ? (
                <>
                  <p className="text-sm font-medium text-gray-900 truncate">
                    {selectedTopic}
                  </p>
                  <p className="text-xs text-gray-500">已选择Topic</p>
                </>
              ) : (
                <>
                  <p className="text-sm font-medium text-gray-500">未选择</p>
                  <p className="text-xs text-gray-400">请先选择Topic</p>
                </>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 发送状态 */}
      {isProducing && (
        <div className="card border-blue-200 bg-blue-50">
          <div className="card-content">
            <div className="flex items-center space-x-3">
              <div className="animate-spin rounded-full h-5 w-5 border-2 border-blue-500 border-t-transparent"></div>
              <div>
                <p className="text-sm font-medium text-blue-700">发送中...</p>
                <p className="text-xs text-blue-600">正在处理消息</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 最近发送结果 */}
      {lastResult && (
        <div className={`card ${
          lastResult.success 
            ? 'border-green-200 bg-green-50' 
            : 'border-red-200 bg-red-50'
        }`}>
          <div className="card-header">
            <h3 className="card-title flex items-center space-x-2">
              {lastResult.success ? (
                <CheckCircle className="w-5 h-5 text-green-500" />
              ) : (
                <XCircle className="w-5 h-5 text-red-500" />
              )}
              <span>发送结果</span>
            </h3>
          </div>
          <div className="card-content">
            <div className={`space-y-2 text-sm ${
              lastResult.success ? 'text-green-700' : 'text-red-700'
            }`}>
              <div className="flex justify-between">
                <span className="font-medium">状态:</span>
                <span>{lastResult.success ? '成功' : '失败'}</span>
              </div>
              
              {lastResult.message && (
                <div className="flex justify-between">
                  <span className="font-medium">消息:</span>
                  <span className="text-right">{lastResult.message}</span>
                </div>
              )}
              
              {lastResult.success && lastResult.partition !== undefined && (
                <div className="flex justify-between">
                  <span className="font-medium">分区:</span>
                  <span>{lastResult.partition}</span>
                </div>
              )}
              
              {lastResult.success && lastResult.offset !== undefined && (
                <div className="flex justify-between">
                  <span className="font-medium">偏移量:</span>
                  <span>{lastResult.offset}</span>
                </div>
              )}
              
              {lastResult.success && lastResult.timestamp && (
                <div className="flex justify-between">
                  <span className="font-medium">时间戳:</span>
                  <span>{new Date(lastResult.timestamp).toLocaleTimeString()}</span>
                </div>
              )}
              
              {!lastResult.success && lastResult.error && (
                <div className="mt-2 p-2 bg-red-100 rounded text-xs">
                  <strong>错误详情:</strong><br />
                  {lastResult.error}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* 使用提示 */}
      <div className="card border-yellow-200 bg-yellow-50">
        <div className="card-header">
          <h3 className="card-title flex items-center space-x-2">
            <AlertCircle className="w-5 h-5 text-yellow-600" />
            <span>使用提示</span>
          </h3>
        </div>
        <div className="card-content">
          <ul className="text-xs text-yellow-700 space-y-1">
            <li>• 消息Key用于分区路由</li>
            <li>• 留空Key将随机分配分区</li>
            <li>• Headers支持JSON格式</li>
            <li>• 批量模式支持JSON导入</li>
            <li>• 建议先测试单条消息</li>
          </ul>
        </div>
      </div>
    </>
  )
}
